<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="mvc" uri="http://www.trkj.com/mvc/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/lgoodslist.css"/>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" />
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
<script type="text/javascript">
	$(function(){
		//删除
		$(".goodssort_delete").click(function(){
			var id=$(this).attr("id").replace("first","");
			var a = $(this);
			var a1=a.attr("id").substring(0,5);
			var a2=a.attr("id").replace("first","");
			if(a1=="first"){
				if(confirm("真的要删除吗？")){
					$.get("goodssort?action=deleteAll", {id: a2}, function(){
						a.parent().parent().remove();
						$(".tr"+id).remove();
					});
				}
			}else{
				if(confirm("真的要删除吗？")){
					$.get("goodssort?action=delete", {id: a.attr("id")}, function(){
						a.parent().parent().remove();
					});
				}
			}
		});
		//批量操作
		$(".handle").click(function(){
			var state=$(this).attr("id");
			var strstate="";
			if(state==0){
				strstate="上架";
			}else if(state==1){
				strstate="下架";
			}else{
				strstate="待审";
			}
			var a=$("input[name='checkbox']:checked");
			if(a.length==0){
            	alert("至少选中一个");
            	return;
            } 
			//获取所有已选的id存到集合
			var list=[];
			$("input[name='checkbox']:checked").each(function(i, o){
				list.push($(o).attr("id"));
            });
            //判断，state不等于null执行修改状态操作，否则执行删除操作
            if(state!=null){
    			if(confirm("确定"+strstate+"吗？")){
    				//循环修改商品状态
    				for(var i=0;i<a.length;i++){
    					$.get("goodslist?action=reviseState", {code: list[i],state: state},function(){
    						a.parent().siblings(".g_state").text(strstate);
    					});
    				}
    			}
            }else{
    			if(confirm("真的要删除吗？")){
    				//循环删除
    				for(var i=0;i<a.length;i++){
    					$.get("goodslist?action=reviseIfdelete", {code: list[i],ifdelete: 0},function(){
    					});
    				}
    				a.parent().parent().remove();
    			}
            }
		});
		$(".ifshow").click(function(){
			var id=$(this).attr("id");
			if($(this).hasClass("open")){
	        	$(this).removeClass("open");
				$(".tr"+id).show();
	        	$(this).children("i").removeClass(".fa fa-minus-square-o").addClass(".fa fa-plus-square-o");
			}else{
	        	$(this).addClass("open");
				$(".tr"+id).hide();
	        	$(this).children("i").addClass(".fa fa-minus-square-o").removeClass(".fa fa-plus-square-o");
			}
		});
	});
</script>
</head>
<body style="font-size: 20px;">
	<div class="top" style="padding: 20px 30px 10px; font-size: 16px;">
		<a href="#">商品</a>/
		<a href="#">商品分类管理</a>/
		<span>分类列表</span>
	</div>
	<div class="middle">
		<div class="span12" style="width: 96%;">
		<a href="goodssort?action=queryFirst">
			<button>
				<i class="fa fa-plus"></i>
				<span>添加分类</span>
			</button>
		</a>
		<a href="#">
			<button>
				<i class="fa fa-gears"></i>
				<span>批量设置</span>
			</button>
		</a>
		</div>
	</div>
	<div class="bottom">
		<div class="span12" style="width: 96%;">
			<table class="table">
			<thead>
				<tr>
					<th>一级分类名称</th>
					<th>二级分类名称</th>
					<th>排序</th>
					<th>首页显示</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${list }" var="u" varStatus="vs">
					<tr>
						<td><a href="javascript:;" class="ifshow" id="${u.id}"><i class="fa fa-plus-square-o"></i></a>${u.classify}</td>
						<td></td>
						<td class="g_state">${u.sort}</td>
						<td>${u.ifshow eq 1? '是':'否'}</td>
						<td><a href="goodssort?action=queryRevise&id=first${u.id}"><i class="fa fa-pencil-square-o"></i></a>
							<a id="first${u.id}" class="goodssort_delete" href="javascript:void(0);"><i class="fa fa-times"></i></a></td>
					</tr>
					<c:forEach items="${u.sec}" var="u2" varStatus="vs2">
						<tr class="tr${u.id}">
							<td></td>
							<td>${u2.classify}</td>
							<td>${u2.sort}</td>
							<td>${u2.ifshow eq 0? '是':'否'}</td>
							<td><a href="goodssort?action=queryRevise&id=second${u2.id}"><i class="fa fa-pencil-square-o"></i></a>
								<a id="${u2.id}" class="goodssort_delete" href="javascript:void(0);"><i class="fa fa-times"></i></a></td>
						</tr>
					</c:forEach>
				</c:forEach>
			</tbody>
		</table>
		</div>
	</div>
</body>
</html>